@import (reference) 'config';
@import (reference) 'icons';

@toolbar-radio-line-height: 57.5px;

.main.wallet.assets {
  .content {
    overflow-x: hidden;
    height: auto;

    .toolbar {
      width: 100%;
      position: relative;
      height: 42px;
      margin-bottom: 10px;

      .title-content {
        height: 36px;
      }
    }

    .btn-json {
      position: absolute;
      right: 0;
      width: 140px;
      @media screen and (max-width: 480px) {
        width: 60px;
        font-size: 0;
      }
    }

    .assets-list {
      width: calc(~"100% + " @padding-main-layout);
      position: relative;
      left: @padding-main-layout * -1 / 2;
      margin: @padding-main-layout / 2 0 -@padding-main-layout / 2;
    }

    .chart-rate {
      height: 394px;
      box-sizing: border-box;
      background-color: @color-white;
      position: relative;
      border-radius: 4px;
      box-shadow: @shadow-type-1;

      .toggler {
        display: none;
      }

      .toolbar {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 0;
        padding: 0 20px;
        height: 58px;

        &::after {
          content: '';
          position: absolute;
          margin: auto;
          left: 20px;
          right: 20px;
          bottom: 0;
          height: 1px;
          background-color: @color-disabled-100;
        }
      }

      .chart-info {
        min-height: 95px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        & > div:not(:last-child) {
          text-align: center;
          margin-right: 42px;
          padding-right: 42px;
          border-right: 1px solid @color-disabled-100;
        }

        h1 {
          margin: 0 0 5px;
          text-align: center;
          font-weight: normal;
        }
      }

      .chart-wrapper {
        height: 239px;
        padding: 0 10px;
      }
      .chart-tooltip {
        background: @white-btn-bg;
        box-shadow: @shadow-type-2;
      }
    }

    .assets-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
}

.toolbar {
  & w-radio-wrap {
    & .btn-wrap.btn-group .btn {
      border-left: 0;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      white-space: nowrap;
      font-family: @font-roboto-regular;
      letter-spacing: 0;
      color: @color-info-500;
      display: block;
      background: none;
      font-size: 17px;
      text-decoration: none;
      line-height: @toolbar-radio-line-height;
      padding: 0;
      margin-right: 30px;
      border: none;
      border-bottom: 1px solid transparent;
    }

    & w-radio input:checked ~ label.btn.btn-radio {
      font-family: @font-roboto-regular;
      letter-spacing: 0;
      font-size: 17px;
      color: @color-submit-400;
      line-height: @toolbar-radio-line-height;
      position: relative;
      z-index: 1;
      border: 0;
      border-bottom-right-radius: 0;
      border-bottom: 1px solid @color-submit-400;
    }

    & .radio-dot {
      display: inline-block;
      margin: 0 5px;
    }
  }

  div.date-btns {
    & w-radio-wrap {
      & .btn-wrap.btn-group .btn,
      & w-radio input:checked ~ label.btn.btn-radio {
        font-size: 13px;
      }
    }
  }
}

.chart-prices-toggle {
  display: none;
}

.toolbar-balance-select {
  margin-top: 10px;
  display: none;
}

i.toggler {
  width: 100%;
  height: 28px;
  background: @dropdown-icon center center no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  cursor: pointer;
}

.assets-wrapper {
  height: 100%;
  min-height: 210px;
}

@media screen and (max-width: 768px) {
  .toolbar-balance-radio {
    display: none;
  }

  .toolbar-balance-select {
    display: block;
  }

  .main.wallet.assets {
    .content .assets-list {
      margin-bottom: 0;
    }

    .content .toolbar {
      width: 100%;
    }

    .content .chart-rate {
      height: auto;
      padding-bottom: 28px;

      .toggler {
        display: block;
      }

      .chart-info,
      .chart-wrapper {
        display: none;
      }

      &.active {

        .chart-info {
          display: flex;
        }

        .chart-wrapper {
          display: block;
        }

        .toggler {
          transform: rotate(180deg);
        }
      }

      .chart-info {

        & > div:not(:last-child) {
          margin-right: 10px;
          padding-right: 10px;
          border-right: 0 none;
        }

        .tag-1 {
          font-size: 11px;
        }

        h1 {
          white-space: nowrap;
          font-size: 24px;
        }

        .rate {
          position: relative;
        }

        .change {
          display: none;
        }
      }

    }
  }

  .assets-wrapper {
    max-height: 100%;
    overflow: visible;
  }
}
